<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="760px"
  @open="beforeOpen"
  :before-close="handleClose"
  custom-class="dialog-border"
  :close-on-click-modal="false"
)
  .modal-title(slot="title") 从图库选择
  .modal-content
    .modal-content-header
      .content-title 材料图库 > 全部图片
      .content-search
        el-autocomplete(
          size="small"
          v-model="albumName"
          :fetch-suggestions="querySearchAsync"
          value="albumId"
          value-key="albumName"
          placeholder="请输入内容"
          @select="handleSelect"
        )
    .modal-list
      .photo-item(:style="`background-image: url(${item.fileUrl})`" v-for="item, index in photoList" :key="index")
        .photo-item-hover
          el-checkbox(v-model="item.isChecked" @change="changeArticle($event, item)")
    .modal-pagination
      el-pagination(
        background
        layout="prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="page"
        @current-change="currentChange"
      )
  .modal-footer(slot="footer")
    .footer-select-total
      span 已选中
      label {{selections.length}}
      span 张图片
    .footer-handles
      el-button(name="primary" size="small" @click="handleClose") 取消
      el-button(type="primary" size="small" @click="confirm") 确定
</template>

<script>
import { getImageList, getPhotoList } from 'api'
export default {
  name: 'photoModal',
  props: {
    show: Boolean,
    fileType: String,
    fileMax: Number
  },
  data () {
    return {
      pageSize: 15,
      page: 1,
      total: 0,
      albumName: '',
      albumId: '',
      photoList: [],
      selections: []
    }
  },
  methods: {
    async querySearchAsync (queryString, cb) {
      try {
        let query = {}
        if (queryString) query.albumName = queryString
        const { ResultSet } = await this.$axios.post(getImageList, { content: { ...query } })
        cb(ResultSet.userData.PhotoAlbumList)
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    currentChange (page) {
      this.currentPage = page
      this.getPhotoList()
    },
    async getPhotoList () {
      try {
        let query = {
          currentPage: this.page,
          pageLines: this.pageSize
        }
        if (this.albumId) query.albumId = this.albumId
        const { ResultSet } = await this.$axios.post(getPhotoList, { content: { ...query } })
        ResultSet.userData.PhotosList.forEach(item => {
          item.isChecked = false
        })
        this.total = ResultSet.recordNumber
        this.photoList = ResultSet.userData.PhotosList
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async handleSelect (item) {
      this.albumId = item.albumId
      this.page = 1
      this.getPhotoList()
    },
    changeArticle (value, item) {
      if (value) {
        this.selections.push(item)
      } else {
        let index = this.selections.findIndex(row => row.photoId === item.photoId)
        if (index > -1) {
          this.selections.splice(index, 1)
        }
      }
    },
    async confirm () {
      if (this.fileType === 'grid') {
        if (this.selections.length > this.fileMax) {
          this.$message.error('材料主图最多可以添加5张图片！')
          return
        }
        this.$emit('confirm', this.selections)
      } else {
        this.$emit('confirm', this.selections)
      }
    },
    beforeOpen () {
      this.selections = []
      this.getPhotoList()
    },
    handleClose () {
      this.$emit('close')
    },
  },
}
</script>

<style lang="scss" scoped>
.modal-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 10px;
  border-bottom: 1px solid #EDEDED;
}
.modal-list {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;
}
.photo-item {
  width: 100px;
  height: 100px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 20px;
  margin-bottom: 20px;
  position: relative;
}
.photo-item-hover {
  position: absolute;
  top: 5px;
  right: 5px;
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .footer-select-total {
    label {
      display: inline-block;
      margin: 0 3px;
      color: #ff2e42;
    }
  }
}
</style>